import React, { Component } from 'react';
import { connect } from 'dva';
// import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import { Alert,Input,Button,Badge,Tooltip,Table,Divider,Icon,Switch, Modal, Form,  Radio,InputNumber  } from 'antd';
// import Login from '@/components/Login';
import styles from './resources.less';


const data = [
  {
    id:1,
    key: '1',
    resName: 'John Brown',
    resourceCode: 32,
    resUrl: '地址路径',
    resType:"资源类型",
    sortNum:"排序",
    keyword:"关键字",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },
  {
    id:2,
    key: '2',
    resName: 'John Brown',
    resourceCode: 32,
    resUrl: '地址路径',
    resType:"资源类型",
    sortNum:"排序",
    keyword:"关键字",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },
  {
    id:3,
    key: '3',
    resName: 'John Brown',
    resourceCode: 32,
    resUrl: '地址路径',
    resType:"资源类型",
    sortNum:"排序",
    keyword:"关键字",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:false,
    operation:"操作"
  },
  {
    id:4,
    key: '4',
    resName: 'John Brown',
    resourceCode: 32,
    resUrl: '地址路径',
    resType:"资源类型",
    sortNum:"排序",
    keyword:"关键字",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },
  {
    id:5,
    key: '5',
    resName: 'John Brown',
    resourceCode: 32,
    resUrl: '地址路径',
    resType:"资源类型",
    sortNum:"排序",
    keyword:"关键字",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },{
  id:6,
    key: '6',
    resName: 'John Brown',
    resourceCode: 32,
    resUrl: '地址路径',
    resType:"资源类型",
    sortNum:"排序",
    keyword:"关键字",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },{
  id:7,
    key: '7',
    resName: 'John Brown',
    resourceCode: 32,
    resUrl: '地址路径',
    resType:"资源类型",
    sortNum:"排序",
    keyword:"关键字",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },{
  id:8,
    key: '9',
    resName: 'John Brown',
    resourceCode: 32,
    resUrl: '地址路径',
    resType:"资源类型",
    sortNum:"排序",
    keyword:"关键字",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:false,
    operation:"操作"
  },{
  id:9,
    key: '10',
    resName: 'John Brown',
    resourceCode: 32,
    resUrl: '地址路径',
    resType:"资源类型",
    sortNum:"排序",
    keyword:"关键字",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:false,
    operation:"操作"
  },





];
const Search = Input.Search;

@Form.create()
@connect(({ orderList, loading }) => ({
  orderList,
  submitting: loading.effects['orderList/fetchList'],
}))
class ResourcesPage extends Component {
  state = {
    type: 'account',
    filteredInfo: null,
    sortedInfo: null,
    visible: false,
    value: "menu",
    currentRecord:{}
  };
  handleChange = (pagination, filters, sorter) => {
    console.log('Various parameters', pagination, filters, sorter);
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter,
    });
  };

  clearFilters = () => {
    this.setState({ filteredInfo: null });
  };

  clearAll = () => {
    this.setState({
      filteredInfo: null,
      sortedInfo: null,
    });
  };

  setAgeSort = () => {
    this.setState({
      sortedInfo: {
        order: 'descend',
        columnKey: 'age',
      },
    });
  };
  onChange = (checked) =>  {
    console.log(`switch to ${checked}`);
  };
  saveFormRef = formRef => {
    this.formRef = formRef;
  };
  handleCreate = () => {
    const {form} = this.props;
    form.validateFields((err, values) => {
      console.log('vv',values)
      if (err) {
        return;
      }

      console.log('Received values of form: ', values);
      form.resetFields();
      this.setState({ visible: false });
    });
  };

  showModal = (record) => {
    this.setState({ visible: true,currentRecord:record });

  };

  handleCancel = () => {
    this.setState({ visible: false });
  };

  render(){
    let { sortedInfo, filteredInfo,currentRecord,visible } = this.state;
    const { form:{getFieldDecorator} } = this.props;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [
      {
        title: '序号',
        dataIndex: 'key',
        key: '11',

      },
      {
        title: '资源名称',
        dataIndex: 'resName',
        key: '10',
        sorter: (a, b) => a.age - b.age,
        sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
      },
      {
        title: '资源编码',
        dataIndex: 'resourceCode',
        key: '9',

      },
      {
        title: '地址路径',
        dataIndex: 'resUrl',
        key: '8',

      },
      {
        title: '资源类型',
        dataIndex: 'resType',
        key: '7',

      },
      {
        title: '关键字',
        dataIndex: 'keyword',
        key: '6',

      },

      {
        title: '排序',
        dataIndex: 'sortNum',
        key: '5',
        filteredValue: filteredInfo.address || null,
        onFilter: (value, record) => record.address.includes(value),
        sorter: (a, b) => a.address.length - b.address.length,
        sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
      },
      {
        title: '创建时间',
        dataIndex: 'gmtCreate',
        key: '4',
        filteredValue: filteredInfo.address || null,
        onFilter: (value, record) => record.address.includes(value),
        sorter: (a, b) => a.address.length - b.address.length,
        sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
      },
      {
        title: '创建人',
        dataIndex: 'createUserName',
        key: '3',
      },
      {
        title: '状态',
        dataIndex: '',
        key: '2',
        render:(text,record)=>{
          return(
            <Switch defaultChecked={text.stauts} onChange={()=>{this.onChange()}}/>
          )
        }
      },
      {
        title: '操作',
        dataIndex: '',
        key: '1',
        render:(text,record)=>{
          return(
           <div className={styles.cur}>
             <span onClick={()=>{
               this.showModal(record)
             }}>操作</span>
             <Divider type="vertical" />
             <span>删除</span>
           </div>
          )
        }
      },
    ];
    return(
      <div className={styles.main}>
          <header>
            <h1>资源配置</h1>
            <div className={styles.seach}>
             <span>资源名称</span> <Input placeholder="请输入资源名称" />
            </div>
          </header>
          <div className={styles.nav}>
            <div className={styles.nav_hea}>
              <Button type="primary" onClick={()=>{this.showModal("")}}>新增资源</Button>
            </div>
            <Table columns={columns} dataSource={data} onChange={this.handleChange} />
          </div>
        {
          visible && <Modal
            visible={visible}
            title="修改资源"
            okText="确定"
            onCancel={this.handleCancel}
            onOk={this.handleCreate}
          >
            <Form layout="vertical">
              <Form.Item label="上级资源">
                {getFieldDecorator('SJname', {
                  initialValue:'',
                  rules: []
                })(<Input disabled />)}
              </Form.Item>
              <Form.Item label="资源名称">
                {getFieldDecorator('resName', {
                  initialValue:currentRecord.resName || '',
                  rules: [{required: true, message: '请输入资源名称'}]
                })(<Input placeholder='资源名称'/>)}
              </Form.Item>
              <Form.Item label="关键字">
                <div className='tishi'>{getFieldDecorator('keyword', {
                  initialValue:currentRecord.keyword || '',
                  rules: [{required: true, message: '请输入关键字'}]
                })(<Input placeholder='例如：reaources_add'/>)}<Tooltip autoAdjustOverflow={false} overlayClassName='toolp' placement="topRight" title={'资源标识符'}>
                  <i className='iconfont icon-tishi'/>
                </Tooltip></div>
              </Form.Item>
              <Form.Item label="接口路径">
                <div className='tishi'>{getFieldDecorator('url', {
                  initialValue:'',
                  rules: [{required: true, message: '请输入接口路径'}]
                })(<Input placeholder='例如：/resources'/>)}<Tooltip autoAdjustOverflow={false} overlayClassName='toolp' placement="topRight" title={'接口地址'}>
                  <i className='iconfont icon-tishi'/>
                </Tooltip></div>
              </Form.Item>
              <Form.Item label="页面路由">
                <div className='tishi'>{getFieldDecorator('pageurl', {
                  rules: []
                })(<Input placeholder='例如：/syztem/resources'/>)}<Tooltip autoAdjustOverflow={false} overlayClassName='toolp' placement="topRight" title={'路由地址'}>
                  <i className='iconfont icon-tishi'/>
                </Tooltip></div>
              </Form.Item>
              <Form.Item label="排序" >
                {getFieldDecorator('sortnum', {
                  rules: []
                })(<InputNumber placeholder='资源排序' min={1}/>)}
              </Form.Item>
              <Form.Item label="Icon">
                <div className='tishi'>{getFieldDecorator('icon', {
                  rules: []
                })(<Input placeholder='例如：icon-ziyuan'/>)}<Tooltip autoAdjustOverflow={false} overlayClassName='toolp' placement="topRight" title={'图标'}>
                  <i className='iconfont icon-tishi'/>
                </Tooltip></div>
              </Form.Item>
              <Form.Item label="功能模块">
                {getFieldDecorator('model', {
                  rules: [{required: true,message: '请选择功能模块'}]
                })( <Radio.Group  >
                  <Radio value={'menu'}>menu</Radio>
                  <Radio value={'function'}>function</Radio>
                  <Radio value={'model'}>model</Radio>
                </Radio.Group>)}
              </Form.Item>
            </Form>
          </Modal>
        }
      </div>
    )
  }
}

export default ResourcesPage;
